import {html, TemplateResult} from 'lit';
import type {Meta, StoryObj} from '@storybook/web-components';
import "../../../echarts/bar/lit-bar.ts"
import {BarProps} from "../../../echarts/bar/lit-bar.ts";

const meta: Meta<BarProps> = {
    title: 'Echarts/LitBar',
    tags: ['autodocs'],
    parameters: {
        docs: {
            description: {
                component: 'tooltip，渐变色，以及其他各类事件暂时无法在storybook中使用，具体请参考echarts的文档',
            },
        }
    },
    render: (args: BarProps): TemplateResult => {
        return html`<lit-bar 
            .chartId=${args.chartId}
            .width=${args.width}
            .height=${args.height}
            .tooltip=${args.tooltip}
            .legend=${args.legend}
            .grid=${args.grid}
            .barWidth=${args.barWidth}
            .axisTick=${args.axisTick}
            .showBarBackground=${args.showBarBackground}
            .backgroundStyle=${args.backgroundStyle}
            .xAxisData=${args.xAxisData}
            .seriesData=${args.seriesData}
        />`;
    },
    argTypes: {
        chartId: { control: 'text' },
        width: { control: 'text' },
        height: { control: 'text' },
        tooltip: { control: 'object' },
        legend: { control: 'object' },
        grid: { control: 'object' },
        barWidth: { control: 'text' },
        axisTick: { control: 'object' },
        showBarBackground: { control: 'boolean' },
        backgroundStyle: { control: 'object' },
        xAxisData: { control: 'object' },
        seriesData: { control: 'object' },
    },
}

export default meta;
type Story = StoryObj<BarProps>;

export const BasicBar: Story = {
    args: {
        chartId: 'basic-bar-chart',
        width: '1200px',
        height: '600px',
        xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        seriesData: [[120, 200, 150, 80, 70, 110, 130]],
    },
};

export const BarWithAxisTick: Story = {
    args: {
        chartId: 'bar-with-axis-tick-chart',
        width: '1200px',
        height: '600px',
        axisTick: {
            alignWithLabel: true
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'shadow'
            }
        },
        legend: {
            data: ['Direct']
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        barWidth: '60%',
        xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        seriesData: [[120, 200, 150, 80, 70, 110, 130]],
    },
}

export const BarWithBackground: Story = {
    args: {
        chartId: 'bar-with-background-chart',
        width: '1200px',
        height: '600px',
        showBarBackground: true,
        backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
        },
        xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        seriesData: [[120, 200, 150, 80, 70, 110, 130]],
    },
}

export const StyleSingleBar: Story = {
    args: {
        chartId: 'style-single-bar-chart',
        width: '1200px',
        height: '600px',
        xAxisData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        seriesData: [[120, {
            value: 200,
            itemStyle: {
                color: '#a90000'
            }
        }, 150, 80, 70, 110, 130]],
    },
}